<!--    保单信息-->
<template>
	<div>
		<mt-header title="保单信息">
		  <router-link to="/" slot="left">
		    <mt-button icon="back" >返回</mt-button>
		  </router-link>
		  <mt-button icon="more" slot="right" @click="more"></mt-button>
		</mt-header>
		<mt-popup  v-model="popupVisible" position="">
			<div class="more index1">首页</div>
			<div  class="more index2">消息</div>
			<div class="more index3">帮助</div>
		</mt-popup>
		 <mt-navbar class="page-part" v-model="selected">
	      <mt-tab-item id="1">车险</mt-tab-item>
	      <mt-tab-item id="2">非车险</mt-tab-item>
	    </mt-navbar>
		
		<mt-tab-container v-model="selected">
	      <mt-tab-container-item id="1">
	        <div class="bigbox">
	        	<div class="one"  v-for="(item,index) in list" :key="index" >
		        	<div class="bigbox-head" v-on:click="toggle(index)" >
			      		<img src="../../../static/img/bd2x.png" class="bigbox-head-img">
			            <span class="head-sb">NO{{index+1}}</span>	
			            <img src="../../../static/img/展开.png" class="bigbox-head-img_i" v-show="item.none" :key="index">
			            <img src="../../../static/img/down.png" class="bigbox-head-img_ii" v-show="item.block" :key="index">
		        	</div>
		        	<div class="bigbox-info" v-show="item.activeIndex">
		        		<mt-field label="保单号"  v-model="item.policyNum"></mt-field>
		        	    <mt-field label="车牌号"  v-model="item.licenseNumber"></mt-field>
		        	    <mt-field label="投保险种名称"  v-model="item.nameCoverage"></mt-field>
		        	    <mt-field label="投保时间"  v-model="item.time"></mt-field>
		        	    <mt-field label="保单状态"  v-model="item.statu"></mt-field>
		        	    <mt-field label="总保费"  v-model="item.all"></mt-field>
		        	    <mt-field label="待续保"  v-model="item.yes"></mt-field>
		        	</div>
		        	<div class="bigbox-foot">
		        		<router-link to="./PolicyDetails" slot="left">
						    <mt-button size="small" type="default">保单详情</mt-button>
						</router-link>
						<router-link to="./ClaimInquiry" slot="left">
						    <mt-button size="small" type="primary" >理赔查询</mt-button>
						</router-link>
						<router-link to="./BatchInformation" slot="left">
							<mt-button size="small" type="danger">批单信息</mt-button>
						</router-link>
		        	</div>
	        	</div>
	        </div>
	      </mt-tab-container-item>
	      <mt-tab-container-item id="2">
	         <div class="bigbox">
	        	<div class="one"  v-for="(item,index) in list" :key="index" >
		        	<div class="bigbox-head" v-on:click="toggle(index)" >
			      		<img src="../../../static/img/bd2x.png" class="bigbox-head-img">
			            <span class="head-sb">NO{{index+1}}</span>	
			            <img src="../../../static/img/展开.png" class="bigbox-head-img_i" v-show="item.none" :key="index">
			            <img src="../../../static/img/down.png" class="bigbox-head-img_ii" v-show="item.block" :key="index">
		        	</div>
		        	<div class="bigbox-info" v-show="item.activeIndex">
		        		<mt-field label="保单号"  v-model="item.policyNum"></mt-field>
		        	    <mt-field label="投保险种名称"  v-model="item.nameCoverage"></mt-field>
		        	    <mt-field label="投保时间"  v-model="item.time"></mt-field>
		        	      <mt-field label="保单险类"  v-model="item.licenseNumber"></mt-field>
		        	    <mt-field label="保单状态"  v-model="item.statu"></mt-field>
		        	    <mt-field label="总保费"  v-model="item.all"></mt-field>
		        	    <mt-field label="待续保"  v-model="item.yes"></mt-field>
		        	</div>
		        	<div class="bigbox-foot">
		        		<router-link to="/" slot="left">
						    <mt-button size="small" type="default">保单详情</mt-button>
						</router-link>
						<router-link to="/" slot="left">
						    <mt-button size="small" type="primary" >理赔查询</mt-button>
						</router-link>
						<router-link to="/" slot="left">
							<mt-button size="small" type="danger">批单信息</mt-button>
						</router-link>
		        	</div>
	        	</div>
	        </div>
	      </mt-tab-container-item>
	    </mt-tab-container>
	</div>
</template>

<script>
  export default {
	  name: 'PolicyInfo',
	  data () {
      return {
      	activeIndex: false, // 初始化点击的索引值
      	selected: '1',
      	block: false, // 初始化点击的索引值
      	none: true, // 初始化点击的索引值
      	popupVisible:false,
	   list:[
		    {"activeIndex":false,"block":false,"none":true,"policyNum":"123456789","licenseNumber":"桂A080DK","nameCoverage":"中国人寿","time":"2018-11-16","statu":"期满","all":"123456.00","yes":"是"},
		    {"activeIndex":false,"block":false,"none":true,"policyNum":"123456789","licenseNumber":"桂A080DK","nameCoverage":"中国人寿","time":"2018-11-16","statu":"期满","all":"123456.00","yes":"是"},
		    {"activeIndex":false,"block":false,"none":true,"policyNum":"123456789","licenseNumber":"桂A080DK","nameCoverage":"中国人寿","time":"2018-11-16","statu":"期满","all":"123456.00","yes":"是"},
		    {"activeIndex":false,"block":false,"none":true,"policyNum":"123456789","licenseNumber":"桂A080DK","nameCoverage":"中国人寿","time":"2018-11-16","statu":"期满","all":"123456.00","yes":"是"},
		    {"activeIndex":false,"block":false,"none":true,"policyNum":"123456789","licenseNumber":"桂A080DK","nameCoverage":"中国人寿","time":"2018-11-16","statu":"期满","all":"123456.00","yes":"是"}
	        ]
    }
  },
  methods:{
  	toggle(index){
  		this.list[index].activeIndex = !this.list[index].activeIndex;
		this.list[index].block=!this.list[index].block;
		this.list[index].none=!this.list[index].none;
	},
	more(){
		this.popupVisible = true
	}
  }
}
	
</script>

<style>
.mint-tab-container{
	background: #eee;
}
.mint-popup{
	z-index: 2003;
    width: 50%;
    background: #000;
    color: #fff;
    border-radius: 10px;
    position: fixed;
    top: 110px;
    margin-left: 90px;
}
.more{
	height: 43px;
	line-height: 43px;
	border-bottom: 1px solid #fff;
}
.index1{
	background-image: url(../../../static/img/icon@2x.png);
	background-repeat: no-repeat;
    background-size: 16%;
    background-position: 20px;
}
.index2{
	background-image: url(../../../static/img/icon@2x.png);
	background-repeat: no-repeat;
    background-size: 16%;
    background-position: 20px;
}
.index3{
	background-image: url(../../../static/img/icon@2x.png);
	background-repeat: no-repeat;
    background-size: 16%;
    background-position: 20px;
}
input{
	text-align: right;
}
.mint-cell{
	    min-height: 30px;
}

	.item {
    display: inline-block;
  }
 
  .nav {
    padding: 10px;
  }
 
  .link {
    color: inherit;
    padding: 20px;
    display: block;
  }
  
 .bigbox>.one{
/*  	height: 300px;*/
    width: 94%;
    margin-top: 15px;
    margin-left: 3%;
  }
  .bigbox-head{
  	height: 40px;
  	text-align: left;
  	border-bottom: 1px solid #eee;
  	background: #fff;
  }
  
  .bigbox-foot{
  	text-align: right;
  	background: #fff;
  	height: 53px;
  }
  .bigbox-head-img{
  	width: 6%;
    margin-left: 18px;
    margin-top: 5px;
  }
  .bigbox-head-img_i{
  	float: right;
    position: relative;
    right: 5%;
    top: 10px;
  }
   .bigbox-head-img_ii{
  	float: right;
    position: relative;
    right: 5%;
    top: 10px;
  }
  .head-sb{
  	font-weight: 800;
  	position: relative;
    top: -5px;
    left: 10px;
  }
  button{
  	    margin-top: 10px;
  }
</style>